<template>
  <div class="shop-cart">
    <div class="cart">
      <div class="cart-left" @click="showCart">
        <div class="logo-wrapper">
          <div class="logo" :class="{'heightLight':totalCount>0}">
            <i class="icon-shopping_cart" :class="{'heightLight':totalCount>0}"></i>
          </div>
          <div class="count" v-show="totalCount>0">{{totalCount}}</div>
        </div>
        <div class="price" :class="{'heightLight':totalPrice>0}">￥{{totalPrice}} </div>
        <div class="deliveryPrice">
          另需配送费￥{{deliveryPrice}}元
        </div>
      </div>
      <div class="cart-right" @click="payList">
        <div class="pay" :class="payClass">
          {{payDesc}}
        </div>
      </div>
      <div class="ball-container">
        <transition-Group name="drop" tag="div"
                          v-on:before-enter="beforeEnter"
                          v-on:enter="enter"
                          v-on:after-enter="afterEnter">
          <div  class="ball"  v-for="(ball,index) in balls" :key="index" v-show="ball.show">
            <div class="inner inner-hook"></div>
          </div>

        </transition-Group>
      </div>
      <transition name="fade">
        <div class="cart-select" v-show="listShow">
          <div class="title">
            <div class="cart-title">购物车</div>
            <div class="clear" @click="clearCart">清空</div>
          </div>
          <div class="cart-content"  ref="selectCart">
            <ul>
              <li v-for="food in selectFoods" class="food">
                <span class="name">{{food.name}}</span>
                <span class="price" v-show="food.count>0">￥{{food.price * food.count}}</span>
                <div class="control">
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <transition name="fade">
      <div class="cart-background" v-show="listShow" @click.stop.prevent="clickShow"></div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import cartcontrol from "../../components/cartcontrol/cartcontrol"
    export default {
      props :{
          deliveryPrice:{
            type:Number,
            default:0
          },
          minPrice: {
            type: Number,
            default: 0
          },

          //保存一个被选择商品的数组,包括被选择商品的单价和数量
          selectFoods:{
            type: Array,
            default:()=>[{
            }
             ]
          }
        },
      data() {
        return {
          balls:[
            {
              show:false,el:null
            },
            {
              show: false,el:null
            },
            {
              show: false,el:null
            },
            {
              show: false,el:null
            },
            {
              show: false,el:null
            }
          ],
          dropBalls:[],
          fold:true  //购物车的展开与隐藏   false就是折叠状态
        }
      },
      mounted(){
        console.log(this.selectFoods)
      },
      components:{
        cartcontrol
      },
      methods: {
          drop(el) {
            // console.log(el)     <span class="icon-add_circle"></span>
            // console.log(this.totalCount)
          for (let i=0;i<this.balls.length;i++){
            // this.balls[i].el = el;
            let ball = this.balls[i];
            if(!ball.show){
              ball.show = true;
              //一定要调用
              ball.el=el;
              this.dropBalls.push(ball)
              return
            }
          }
          },
        clickShow(){
            this.fold = true
        },
        beforeEnter (el,done) {
          let count = this.balls.length
          console.log(count)
          while (count--){
            let ball = this.balls[count]
            if(ball.show){
              let rect = ball.el.getBoundingClientRect();
              // console.log(rect)
              let x = rect.left - 32;
              let y = -(window.innerHeight - rect.top - 22);
              // el.style.display = '';
              //外层动画
              el.style.webkitTransform = `translate3d(0,${y}px,0)`;
              el.style.transform = `translate3d(0,${y}px,0)`;
              //小球自身的动画
              let inner = el.getElementsByClassName('inner-hook')[0];
              inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
              inner.style.transform = `translate3d(${x}px,0,0)`;

            }
          }
        },
        enter (el,done) {
          //关闭ESlint语法监测，因为ES6语言规范会让被申明却未被调用的变量报错
          /* eslint-disable no-unused-vars */
            //触发一下浏览器重绘
          // console.info(el)
          let rf = el.offestHeight;

          setTimeout(() => {
            this.$nextTick(() => {
              // el.style.display = '';
              el.style.webkitTransform = 'translate3d(0,0,0)';
              el.style.transform = 'translate3d(0,0,0)';
              let inner = el.getElementsByClassName('inner-hook')[0];
              inner.style.webkitTransform = 'translate3d(0,0,0)';
              inner.style.transform = 'translate3d(0,0,0)';
              // 监听动画结束事件，之后执行done函数
              el.addEventListener('transitionend', done);
          })
          })


        },
        afterEnter (el) {
          el.style.display = 'none' //隐藏小球
          let ball = this.dropBalls.shift();//把数组的第一个元素从其中删除，并返回第一个元素的值
          ball.show = false;
          ball.el=null;

        },
        showCart() {
          if(!this.totalCount){
            return;  //强制结束
          }
          this.fold = !this.fold
          // console.log(this.fold)
        },
        clearCart() {
            this.selectFoods.forEach((food) => {
              food.count = 0;
            })
        },
        payList() {
            if(this.totalPrice < this.minPrice){
              return
            }
            let price=this.totalPrice+this.deliveryPrice
            window.alert('总共'+price+'元')
        }
      },
        computed:{
          //购物车里总和
          totalPrice: function () {
            let total = 0;
            for (let i = 0; i < this.selectFoods.length; i++) {
              console.log(this.selectFoods)
              total = total + this.selectFoods[i].price * this.selectFoods[i].count

            }
            if(total>0){
              return total
            }else{
              return 0
            }

          },
          //购物车里有多少商品
          totalCount(){
            let count = 0;
            for(let i = 0;i < this.selectFoods.length; i++){
              count += this.selectFoods[i].count
            }
            return count

          },
          payDesc(){
            if(this.totalPrice === 0){
              return `￥`+this.minPrice+`起送`
            }else if(this.totalPrice < this.minPrice){
              let dif = this.minPrice - this.totalPrice;
              //${dif} ===== 一定要加$ 不让显示不了
              return '还差￥'+dif+'元起送'
            }else{
              return '去结算'
            }

          },
          payClass(){
            if(this.totalPrice < this.minPrice){
              return 'no-enough'
            }else{
              return 'enough'
            }
          },
          //判断购物车  有一个变量show判断是展示和折叠的状态
          listShow(){
            if(!this.totalCount){   //等于0
              this.fold = true;
              return false;  //不再继续向下执行
            }
            let show = !this.fold;
            if(show){
              this.$nextTick(() => {//this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
                if(!this.scroll){
                  this.scroll = new BScroll(this.$refs.selectCart,{
                    click:true
                  })
                }else {
                  this.scroll.refresh();//子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常
                }
              })
            }
            return show
          }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minix.styl"
  .shop-cart
    .cart
      position fixed
      display flex
      bottom: 0
      left: 0
      width 100%
      height 46px
      background-color #141d27
      z-index: 5
      .cart-left
        flex:1
        z-index: 300
        .logo-wrapper
          display inline-block
          vertical-align top
          position relative
          top:-10px
          width 56px
          height 56px
          padding 6px
          border-radius 50%
          background-color #141d27
          margin:0 12px
          box-sizing border-box

          .logo
            background-color #202933
            width 100%
            height 100%
            border-radius 50%
            text-align center
          .heightLight
              background-color rgb(0,160,220)
            .icon-shopping_cart
              font-size 24px
              color #7F848A
              line-height 44px
              text-align center
            .heightLight
                color: #fff
          .count
            position absolute
            top:0
            right:0
            width:24px
            height:16px
            line-height 16px
            color: #fff
            background-color rgb(240,20,20)
            border-radius 16px
            text-align center
            font-size 9px
            font-weight 700
            box-shadow 0px 4px 0px rgba(0,0,0,0.4)
        .price
          vertical-align top
          display inline-block
          color rgba(255,255,255,0.4)
          font-size 16px
          line-height 48px
          margin-bottom 12px
          font-weight 700
          padding-right 12px
          border-right 1px solid rgba(255,255,255,0.1)
        .heightLight
          color: #fff
        .deliveryPrice
          font-size 14px
          vertical-align top
          display inline-block
          color rgba(255,255,255,0.4)
          line-height 48px
          margin-left 12px

      .cart-right
        font-size 0
        flex 0 0 105px
        z-index: 200
        .pay
          font-size 16px
          color: rgba(255,255,255,0.4)
          font-weight 700
          line-height 48px
          text-align center
        .no-enough
          background-color #2B333C
        .enough
          background-color #00b43c
          color: #fff
      .ball-container
        .ball
          position fixed
          left 32px
          bottom 22px
          z-index 200
          .inner
            width 15px
            height 15px
            border-radius 50%
            background-color #00A0DC
            transition all 1s linear
          &.drop-enter-active
            transition all 1s cubic-bezier(0.49,-0.29,0.75,0.41)
      .cart-select
        position absolute
        bottom 46px
        left:0
        width 100%
        overflow hidden
        z-index:100
        margin-top -300px
        &.fade-enter-active,&.fade-leave-active
          transition all 0.5s ease
        &.fade-enter,&.fade-leave-to
          opacity 0
          margin-top 0
        .title
          height 40px
          padding 0 18px
          box-sizing border-box
          width 100%
          background-color #f3f5f7
          border-bottom 1px solid rgba(7,17,27,0.1)
          .cart-title
            float left
            font-size 14px
            font-weight 200
            color rgb(7,17,27)
            line-height 40px
          .clear
            float: right
            font-size 12px
            color rgb(0,160,220)
            line-height 40px
            text-align right
        .cart-content
          padding 0 18px
          background-color #fff
          max-height 217px
          overflow hidden

          .food
            height 48px
            line-height 48px
            padding 12px 0
            box-sizing border-box
            position relative
            border-1px(rgba(7,17,27,0.1))
            .name
              position absolute
              bottom 0
              font-size 14px
              color rgb(7,17,27)
              font-weight 700
              line-height 48px
            .price
              position absolute
              right:100px
              line-height 24px
              font-size 14px
              font-weight 700
              color rgb(240,20,20)
            .control
              position absolute
              right 0
              bottom 6px

    .cart-background
      position fixed
      top:0
      left:0
      width 100%
      height:100%
      z-index:1
      background-color rgba(7,17,27,0.6)
      filter blur(10px)
      &.fade-enter-active,&.fade-leave-active
        transition all 0.5s linear
      &.fade-enter,&.fade-leave
        opacity 0
</style>
